<script setup>
import DetailItem from '@/views/workOrder/components/DetailItem.vue'
import FileList from '@/components/FilePreviewer/FileList.vue'
import { useRouter } from 'vue-router/composables'
import CustomTextarea from '@/views/workOrder/components/CustomTextarea.vue'
import { disposeOrderCheckResponse } from '@/apis/order.js'
import { Toast } from 'vant'
import UploadTrigger from '@/components/FilePreviewer/UploadTrigger.vue'

const router = useRouter()
const submitLoading = ref(false)
const feedbackFormRef = ref('')
const formData = reactive({
  orderNo: '',
  attachmentInfo: [],
  opinion: ''
})
const rules = reactive({
  opinion: [{ required: true, message: '核查反馈不能为空！' }]
})
// 提交表单
async function submitForm() {
  feedbackFormRef.value
    .validate()
    .then(async () => {
      try {
        submitLoading.value = true
        const params = {
          orderNo: formData.orderNo,
          opinion: formData.opinion,
          attachmentInfo: formData.attachmentInfo?.map((item) => ({
            url: item.url,
            originalName: item.originalName
          }))
        }
        const res = await disposeOrderCheckResponse(params)
        submitLoading.value = false
        if (res.ret === 0) {
          Toast.success('保存成功')
          router.back()
        } else {
          Toast.fail(res.msg || '保存失败')
        }
      } catch (error) {
        submitLoading.value = false
        Toast.fail('网络错误，请稍后再试~')
      }
    })
    .catch((error) => {
      Toast(error[0].message)
    })
}

onMounted(() => {
  formData.orderNo = router.currentRoute.query.orderNo
})
</script>

<template>
  <div class="bg-#F7F8FA h-full">
    <van-form
      ref="feedbackFormRef"
      class="bg-white"
      scroll-to-error
      :show-error-message="false"
      validate-first
    >
      <CustomTextarea
        required
        :rules="rules.opinion"
        :modelValue.sync="formData.opinion"
        label="核查反馈"
      />
    </van-form>
    <div class="px-16px mt-8px bg-white">
      <DetailItem label="附件" top>
        <FileList
          removable
          :upload="true"
          :preview="true"
          :files.sync="formData.attachmentInfo"
          :imageMax="9"
          :otherMax="9"
        >
          <template #empty="{ handleUpload }">
            <div class="h-80px w-80px" @click="handleUpload">
              <UploadTrigger icon-size="7vw" />
            </div>
          </template>
        </FileList>
      </DetailItem>
    </div>
    <div class="py-24px px-16px">
      <van-button
        :disabled="!formData.opinion"
        type="primary"
        size="normal"
        block
        @click="submitForm"
        :loading="submitLoading"
      >
        确定
      </van-button>
    </div>
  </div>
</template>

<style scoped lang="less">
.van-button--primary {
  font-size: 16px;
  line-height: 16px;
  font-weight: 500;
  color: #fff;
  background-color: #36b374;
  border: 1px solid #36b374;
  border-radius: 4px;
}

.van-cell--required::before {
  left: 22vw;
}
</style>
